<template>
	<!-- pages/user/setting/cropper/cropper.wxml -->
  <view>
    <navbar></navbar>
    <view class="container">
      <ksp-cropper mode="fixed" :width="width" :height="height" :maxWidth="1024" :maxHeight="1024" :url="src"
                   @cancel="onCancel" @ok="onComplete"></ksp-cropper>
    </view>
  </view>
</template>

<script>
	// pages/user/setting/cropper/cropper.js
	const app = getApp();
  import navbar from "@/components/navbar/navbar";
	export default {
    components: {
      navbar
    },
		data() {
			return {
				src: '',
				width: 300,
				height: 300,
			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			//获取到image-cropper实例
			this.setData({
				...options
			});
		},
		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady: function() {},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {},
		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide: function() {},
		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload: function() {},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {},
		methods: {
			//////// image-cropper callback methods ////////
			onCancel: function(e) {
				uni.navigateBack();
			},

			onComplete: function(ev) {
				if (app.lastPage().cropperImageCallback) {
					// #ifdef H5
					app.lastPage().cropperImageCallback(ev.base64);
					// #endif

					// #ifndef H5
					app.lastPage().cropperImageCallback(ev.path);
					// #endif
				}
				uni.navigateBack();
			}
		}
	};
</script>
<style lang="scss" scoped>
	/* pages/user/setting/cropper/cropper.wxss */
</style>
